import Image, { StaticImageData } from "next/image"

interface CenterImageProps {
  src: StaticImageData,
  title: string
}

export default function CenterImage({
  src,
  title
}: CenterImageProps) {
  return (
    <div className="w-[184px] h-[138px] relative m-2">
      <Image className="w-[184px] h-[138px]" src={src} alt={''} />
      <div className="absolute flex items-center justify-center top-[36%] w-full h-[50px]" 
      style={{backgroundColor: 'rgba(255, 255, 255, 0.6)', color: '#fff'}}>
        <span>{title}</span>
      </div>
    </div>
  )
}